import {
  reactive,
  computed
} from "vue";

// 过滤操作
const filters = {
  all(todos) {
    return todos;
  },
  active(todos) {
    return todos.filter((todo) => !todo.complated);
  },
  completed(todos) {
    return todos.filter((todo) => todo.complated);
  },
};

export function useFilter(todos) {
  const filterState = reactive({
    visibility: "all",
    filtersTodos: computed(() => {
      return filters[filterState.visibility](todos.value);
    }),
    filterItems: [{
        label: "All",
        value: "all",
      },
      {
        label: "Active",
        value: "active",
      },
      {
        label: "Completed",
        value: "completed",
      },
    ],
  })
  return filterState;
}
